<template>
  <el-dialog
    :model-value="dialogVisible"
    @update:model-value="$emit('update:dialogVisible', $event)"
    title="质量分详情"
    width="80%"
    destroy-on-close
  >
    <div v-if="scoreDetail" class="score-detail">
      <div class="total-score">
        <el-statistic title="总评分" :value="scoreDetail.totalScore">
          <template #suffix>
            <span class="score-suffix">/100</span>
          </template>
        </el-statistic>
      </div>

      <el-divider content-position="center">详细评分</el-divider>

      <div class="detail-list">
        <el-collapse accordion>
          <el-collapse-item v-for="(category, index) in scoreDetail.detailList" :key="index">
            <template #title>
              <div class="category-header">
                <span>{{ category.categoryDescription }}</span>
                <span class="category-score">得分: {{ category.remainingScore }}</span>
              </div>
            </template>
            <div v-for="(moduleGroup, groupIndex) in category.moduleGroupList" :key="groupIndex" class="module-group">
              <div class="module-header">
                <el-tag type="info">{{ moduleGroup.moduleRuleDescription }}</el-tag>
                <span class="module-score">扣分: -{{ moduleGroup.score }}</span>
              </div>
              <el-table :data="moduleGroup.detailList" border stripe style="width: 100%; margin-top: 10px;">
                <el-table-column prop="detailDesc" label="问题描述" min-width="200"></el-table-column>
                <el-table-column prop="path" label="问题位置" min-width="180"></el-table-column>
                <el-table-column prop="extendDesc" label="扩展信息" min-width="150"></el-table-column>
                <el-table-column prop="errorCode" label="错误代码" width="100"></el-table-column>
                <el-table-column prop="category" label="类别" width="120"></el-table-column>
                <el-table-column prop="subCategory" label="子类别" width="100"></el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { QualityScoreResult } from '@/api/resume'

const props = defineProps<{
  dialogVisible: boolean
  scoreDetail: QualityScoreResult | null
}>()

const emit = defineEmits<{
  'update:dialogVisible': [value: boolean]
}>()
</script>

<style scoped>
.score-detail {
  padding: 20px;
}

.total-score {
  text-align: center;
  margin-bottom: 20px;
}

.score-suffix {
  font-size: 14px;
  color: #909399;
}

.detail-list {
  margin-top: 20px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.category-score {
  font-weight: bold;
  color: #409EFF;
}

.module-group {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.module-score {
  color: #F56C6C;
  font-weight: bold;
}
</style>